<template>
  <div class="event-list-container">
    <h2>活动列表</h2>
    <div class="filter-section">
      <input type="text" v-model="searchQuery" placeholder="搜索活动名称..." class="search-input">
      <select v-model="statusFilter" class="status-select">
        <option value="">全部状态</option>
        <option value="ongoing">进行中</option>
        <option value="upcoming">即将开始</option>
        <option value="completed">已结束</option>
      </select>
      <button class="refresh-btn">刷新</button>
    </div>
    <table class="event-table">
      <thead>
        <tr>
          <th>活动名称</th>
          <th>开始时间</th>
          <th>结束时间</th>
          <th>状态</th>
          <th>参与人数</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="event in events" :key="event.id">
          <td>{{ event.name }}</td>
          <td>{{ event.startTime }}</td>
          <td>{{ event.endTime }}</td>
          <td><span :class="['status', event.status]">{{ event.statusText }}</span></td>
          <td>{{ event.participants }}</td>
          <td>
            <button class="edit-btn">编辑</button>
            <button class="delete-btn">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="pagination">
      <button :disabled="currentPage === 1">上一页</button>
      <span>{{ currentPage }} / {{ totalPages }}</span>
      <button :disabled="currentPage === totalPages">下一页</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EventList',
  setup() {
    // 模拟数据
    const events = [
      { id: 1, name: '年度技术峰会', startTime: '2024-05-15 09:00', endTime: '2024-05-15 17:00', status: 'ongoing', statusText: '进行中', participants: 156 },
      { id: 2, name: '产品发布会', startTime: '2024-05-12 14:00', endTime: '2024-05-12 16:30', status: 'upcoming', statusText: '即将开始', participants: 89 },
      { id: 3, name: '用户交流会', startTime: '2024-05-10 10:00', endTime: '2024-05-10 12:00', status: 'completed', statusText: '已结束', participants: 203 },
      { id: 4, name: '开发者大会', startTime: '2024-05-08 09:00', endTime: '2024-05-09 17:00', status: 'completed', statusText: '已结束', participants: 287 },
      { id: 5, name: '营销研讨会', startTime: '2024-05-20 13:30', endTime: '2024-05-20 15:30', status: 'upcoming', statusText: '即将开始', participants: 45 }
    ]

    // 分页数据
    const currentPage = 1
    const totalPages = 1

    // 过滤条件
    const searchQuery = ''
    const statusFilter = ''

    return {
      events,
      currentPage,
      totalPages,
      searchQuery,
      statusFilter
    }
  }
}
</script>

<style scoped>
.event-list-container {
  padding: 20px;
}

h2 {
  margin-bottom: 24px;
  color: #333;
}

.filter-section {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.search-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
}

.status-select {
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  min-width: 120px;
}

.refresh-btn {
  padding: 8px 16px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.refresh-btn:hover {
  background-color: #40a9ff;
}

.event-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

th, td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
}

th {
  background-color: #fafafa;
  font-weight: 500;
  color: #666;
  font-size: 14px;
}

td {
  font-size: 14px;
  color: #333;
}

.status {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.status.ongoing {
  background-color: #e6f7ff;
  color: #1890ff;
}

.status.upcoming {
  background-color: #f6ffed;
  color: #52c41a;
}

.status.completed {
  background-color: #f5f5f5;
  color: #999;
}

.edit-btn, .delete-btn {
  padding: 4px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  margin-right: 8px;
}

.edit-btn {
  background-color: #1890ff;
  color: white;
}

.edit-btn:hover {
  background-color: #40a9ff;
}

.delete-btn {
  background-color: #ff4d4f;
  color: white;
}

.delete-btn:hover {
  background-color: #ff7875;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}

.pagination button {
  padding: 8px 16px;
  border: 1px solid #d9d9d9;
  background-color: white;
  border-radius: 4px;
  cursor: pointer;
}

.pagination button:hover:not(:disabled) {
  border-color: #1890ff;
  color: #1890ff;
}

.pagination button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
</style>